<template>
  <StudentLayout>
    <el-button :icon="Plus" class="mb-4" type="primary" @click="editMenuPop()">新增角色</el-button>
     <el-menu
      class="el-menu-vertical-demo"
    >
      <el-menu-item v-for="(item, index) in roleList" :index="item.name" class="odd:bg-gray-100 flex">
        <span class="w-44">{{item.description}}</span>
        <span class="flex-1 text-center">{{item.level}}</span>
        <div class="alignMiddle w-44 text-right">
          <el-button link type="primary" @click="editMenuPop(item)">编辑</el-button>
          <el-popconfirm title="确认删除吗?"
              @confirm="delRoleFun(item)"
          >
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </el-menu-item>
     </el-menu>
     
    <el-dialog v-model="dialogFormVisible" :title="isEdit ? '编辑角色' : '新增角色'" width="500">
      <el-form :model="form">
        <el-form-item label="角色中文名称" label-width="140" required>
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="角色英文名称" label-width="140" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="角色等级" label-width="140" required>
          <el-input v-model="form.level" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="insertRoleFun()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </StudentLayout>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import StudentLayout from '@/layouts/StudentLayout.vue'
import  { getRoleList, insertRole, delRole } from '@/composables/school'

const roleList = ref([])
const roleListAjax = async () => {
  await getRoleList().then(res => {
    roleList.value = res.data
  })
}

const dialogFormVisible = ref(false)
const isEdit = ref(false)
const form = reactive({
  name: '',
  description: '',
  level: ''
})
const editMenuPop = (item) => {
  isEdit.value = false
  form.name = ''
  form.description = ''
  form.level = ''
  dialogFormVisible.value = true
  delete form.id
  if(item) {
    isEdit.value = true
    form.name = item.name
    form.description = item.description
    form.level = item.level
    form.id = item._id
  }
}
const insertRoleFun = async () => {
  form.isEdit = isEdit.value ? true : false
  await insertRole(form).then(res => { 
    if (res.code === 200) {
      dialogFormVisible.value = false
      roleListAjax()
      ElMessage({
        message: isEdit.value ? '编辑成功' : '新增成功',
        type: 'success',
      })
    }
  })
}
const delRoleFun = async (item) => {
  const param = {
    _id: item._id,
    level: item.level
  }
  await delRole(param).then(res => {
    if (res.code === 200) {
      roleListAjax()
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    }
  })
}

onMounted(() => {
  roleListAjax()
})
</script>
<style scoped>

.alignMiddle button{
  vertical-align: middle;
}
</style>